import  React from 'react'
import {connect} from 'react-redux'

const TodoList = (props)=>{
  const {inputValue,changeInputValue,handleClick,handleDelete,list} = props
  return (
    <div>
      <div>
        <input value={inputValue} onChange={changeInputValue}/>
        <button onClick={handleClick}>提交</button>
      </div>
      <ul>
        {
          list.map((item,idx)=>{
            return (
              <li onClick={()=>{handleDelete(idx)}} key={idx}>{item}</li>
            )
          })
        }
      </ul>
    </div>
  )
}


const mapStateToProps = (state)=>{
  return {
    inputValue: state.inputValue, //拿store里的inputValve数据，放到props里的inputValue位置
    list:state.list
  }
}

//把store.dispatch方法挂载到props上
const mapDispatchToProps = (dispatch)=>{ //也可以通过props
  return {
    changeInputValue(e){
      const action={
        type:'change_input_value',
        value: e.target.value
      }
      dispatch(action)
    },
    handleClick(){
      const action={
        type:'add_item'
      }
      dispatch(action)
    },
    handleDelete(idx){
      const action={
        type:'delete_item',
        idx
      }
      dispatch(action)
    }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(TodoList)
//让TodoList组件和store做连接，怎么做连接，这个映射关系就在mapStateToProps中
//让store里的数据映射到组件中props对于的数据上。
//TodoList只是一个ui组件，connect方法把ui组件和这些业务逻辑相结合，所以connect执行后导出的是一个容器组件。对ui组件进行了一个包装。